<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登录</title>
    <link rel="icon" href="/image/favicon.ico" type="image/x-icon"/>
    <script src="/vue.min.js"></script>
    <script src="/axios.min.js"></script>
    <style>
        #login {
            border: rgb(255, 255, 255) solid 1px;
            height: 1000px;
            background-image: url('/image/登录页面背景.png');
            background-size: 100% 100%;
        }

        #login-page {
            opacity: 0.85;
            font-family: Arial, sans-serif;
            position: absolute;
            border: white soild 1px;
            width: 480px;
            height: 600px;
            background: rgb(243, 243, 243);
            background-size: 100% 100%;
            margin-top: 200px;
            left: 65%;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .button-group {
            display: flex;
            /* 使用flex布局来排列按钮 */
            justify-content: center;
            /* 按钮之间保持空间 */
            margin: 0 auto;
            /* 水平居中 */
        }

        .button1 {
            width: 100px;
            height: 50px;
            background-color: white;
            /* 设置背景颜色 */
            color: rgb(81, 212, 186);
            /* 设置文字颜色 */
            font-size: 16px;
            border: none;
            /* 移除边框 */
            cursor: pointer;
            /* 将鼠标样式改为指针样式 */
            transition: all 0.3s ease;
            /* 添加过渡效果 */
        }

        .button1:hover {
            background-color: #aababa;
            /* 鼠标悬停时的背景颜色变化 */
        }

        .username {
            margin-top: 40px;
            text-align: center;
        }

        .username input {
            width: 65%;
            height: 30px;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        .userpassword {
            margin-top: 40px;
            text-align: center;
        }

        .userpassword input {
            width: 65%;
            height: 30px;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        .code {
            margin-top: 40px;
            text-align: center;
        }

        #bt {
            display: flex;
            margin: 0 auto;
            /* 水平居中 */
            margin-top: 50px;
            width: 150px;
            height: 50px;
            background-color: white;
            /* 设置背景颜色 */
            color: rgb(17, 174, 168);
            /* 设置文字颜色 */
            font-size: 16px;
            border: 1px;
            /* 移除边框 */
            cursor: pointer;
            /* 将鼠标样式改为指针样式 */
            transition: all 0.3s ease;
            /* 添加过渡效果 */
        }

        #bt:hover {
            background-color: #aababa;
            /* 鼠标悬停时的背景颜色变化 */
        }

        .button1.active {
            background-color: #aababa;
            /* 激活状态下的背景颜色 */
        }

        .none {
            margin-top: 70px;
            margin-left: 350px;
        }

        .manage{
            position: absolute;
            margin-top: 55px;
        }

        #canvas {
            cursor: pointer;
            display: block;
            /* 确保canvas是可见的 */
        }
    </style>
</head>

<body>
    <div id="app">
        <div id="login">
            <div id="login-page">
                <h2 align="center">聘途</h2>
                <div class="button-group">
                    <button class="button1" :class="{ active: jobSeeking }" @click="setJobSeeking(true)">我要找工作</button>
                    <button class="button1" :class="{ active: recruiting }" @click="setJobSeeking(false)">我要招聘</button>
                </div>
                <form @submit.prevent="submitForm">
                    <div class="username">
                        <input type="text" v-model="username" placeholder="请输入用户名">
                    </div>
                    <div class="userpassword">
                        <input type="password" v-model="password" placeholder="请输入密码">
                    </div>
                    <div class="code">
                        <canvas ref="captchaCanvas" width="120" height="40" style="margin-left: 20px;"></canvas>
                        <input type="text" v-model="inputCaptcha" style="height: 25px;margin-left: 20px;"
                            placeholder="请输入验证码">
                    </div>
                    <div class="submit">
                        <input type="submit" value="登录" id="bt">
                    </div>
                </form>

                <div class="manage">
                    <ul>
                        <a href="/管理员页面/管理员登陆.html">管理员登录</a>
                    </ul>
                </div>

                <div class="none">
                    <ul>
                        <a :href="jobSeeking?'用户注册.html':'企业注册.html'">注册账号</a>
                    </ul>
                </div>

               
            </div>
        </div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                username: '',
                password: '',
                inputCaptcha: '',
                captcha: '',
                jobSeeking: true, // 默认选中"我要找工作"
                recruiting: false // 默认不选中"我要招聘"
            },
            methods: {



                setJobSeeking(isJobSeeking) {
                    this.jobSeeking = isJobSeeking;
                    this.recruiting = !isJobSeeking;
                },
                generateCaptcha() {
                    const canvas = this.$refs.captchaCanvas;
                    const context = canvas.getContext('2d');
                    context.clearRect(0, 0, 120, 40);
                    const aCode = Array.from('0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ');
                    let captcha = '';
                    for (let i = 0; i < 4; i++) {
                        const x = 20 + i * 20;
                        const y = 20 + 10 * Math.random();
                        const index = Math.floor(Math.random() * aCode.length);
                        const txt = aCode[index];
                        captcha += txt;
                        context.font = "bold 20px Arial";
                        context.fillStyle = this.getColor();
                        context.save();
                        context.translate(x, y);
                        const deg = 20 * Math.random() * Math.PI / 180;
                        context.rotate(deg);
                        context.fillText(txt, 0, 0);
                        context.restore();
                    }
                    this.captcha = captcha;
                },
                getColor() {
                    var r = Math.floor(Math.random() * 256);
                    var g = Math.floor(Math.random() * 256);
                    var b = Math.floor(Math.random() * 256);
                    return `rgb(${r},${g},${b})`;
                },
                submitForm() {

                    if (this.inputCaptcha !== this.captcha) {
                        alert('验证码错误');
                        return;
                    }
                    let data = new FormData();
                    data.append("username", this.username);
                    data.append("password", this.password);

                    // 根据 jobSeeking 的值选择不同的登录端点
                    let url = this.jobSeeking ? 'http://localhost:8080/hqdx/seeker/login' : 'http://localhost:8080/hqdx/company/login';

                    axios.post(url, data)
                        .then(response => {
                            console.log(response.data);
                            if (response.data.success == true) {
                                // 根据角色跳转到不同的首页
                                let redirectTo = this.jobSeeking ? "/求职者页面/首页.html" : "/企业页面/公司端-首页.html";
                                sessionStorage.setItem('userData', JSON.stringify(response.data.data.items));
                                window.location.href = redirectTo;
                                // console.log(response.data.data.items);
                            }
                            else {
                                alert('用户名密码错误')
                            }
                        })
                        .catch(error => {
                            console.log(error);
                        });
                },
                refreshCaptcha() {
                    this.generateCaptcha();
                }
            },
            mounted() {
                this.generateCaptcha();
                this.$refs.captchaCanvas.addEventListener('click', this.refreshCaptcha);
            }
        });
    </script>
</body>

</html>